<!--  -->
<template>
  <div>
  自理情况
 
  <el-table :data="list" style="width: 100%">
    <el-table-column prop="id" label="序号" width="180" />
    <el-table-column prop="name" label="	维度" width="180" />
    <el-table-column  label="操作">
      <template #default="scope">
        <el-radio-group @change="handleChange" v-model="scope.row.val">
    <el-radio value="正常">正常</el-radio>
    <el-radio value="轻度依赖">轻度依赖</el-radio>
    <el-radio value="重度依赖">重度依赖</el-radio>
  </el-radio-group>
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>

<script lang='ts' setup>
import { List } from 'echarts';
import { inject,toRefs,ref,onMounted, watchEffect} from 'vue'
import { SelfCares } from '../../apis/selfCares/type';
import { getSelfcareList } from '../../apis/selfCares/selfCares';
import { Elderly, SelfCare } from '../../apis/elderly/type';
const list=ref<SelfCares[] | undefined>([])

const formData=inject<Elderly>("formData");
const getData=async()=>{
  const res=await getSelfcareList()
  list.value=res.list;

  updateVal();
}

const updateVal=()=>{
 
  if(!formData?.selfCares || !list.value?.length) return;
 
  list.value?.forEach(item=>{
      item.val=formData?.selfCares?.find(item2=>item2.name==item.name)?.val
  })

}
watchEffect(()=>{
   updateVal();
})



const handleChange=(val:any)=>{
  console.log(val);

  formData!.selfCares= list.value as SelfCare[];
}

getData();
</script>
<style scoped>
</style>